import { Card, Cascader, Col, DatePicker, Row, Skeleton } from 'antd';
import moment from 'moment';
import { useEffect, useState } from 'react';
import TrendCuesColumnCard from './TrendCuesColumnCard';
import TrendCuesRankCard from './TrendCuesRankCard';
import { useAccess } from 'umi';



const organizationTopIdExamineOptions = [
  {
    value: '',
    label: '全部',
  },
  {
    value: '6528130000000100',
    label: '机关部门',
  },
  {
    value: '6528130000000200',
    label: '镇街',
  },
  {
    value: '6528130000000400',
    label: '国有企业',
  },
]



const organizationTopIdOptions = [
  {
    value: '',
    label: '全部',
  },
  // {
  //   value: 'xibu',
  //   label: '西部科学城重庆高新区',
  //   children: [

  //     {
  //       value: '6528130000000100',
  //       label: '机关部门',
  //     },
  //     {
  //       value: '6528130000000200',
  //       label: '镇街',
  //     },
  //     {
  //       value: '6528130000000400',
  //       label: '国有企业',
  //     },
  //   ]
  // },
  // {
  //   value: 'xiaqu',
  //   label: '辖区单位',
  //   children: [
  //     {
  //       value: '7420108236324933',
  //       label: '企业',
  //     },
  //     {
  //       value: '6528130000000500',
  //       label: '科研平台',
  //     },
  //     {
  //       value: '6528130000006001',
  //       label: '高校',
  //     },
  //     {
  //       value: '6528130000006002',
  //       label: '中小学',
  //     },
  //     {
  //       value: '6528130000000700',
  //       label: '医疗系统',
  //     },
  //   ]
  // },
]


interface TrendCardProps { }

const TrendCard: React.FC<TrendCardProps> = ({ }) => {
  const access = useAccess();

  const monthFormat = 'YYYY-MM-DD';
  const startDate = moment().startOf('month');
  const endOfDate = moment();


  //线索上报量、线索收录量
  const [dataTabType, setDataTabState] = useState<string>('0');

  //选择组织类型
  const [dataOrganizationTopName, setDataOrganizationTopNameState] = useState<string>(access.宣传刊播x配置x管理员 ? organizationTopIdOptions[0].label : organizationTopIdExamineOptions[0].label);
  const [dataOrganizationTopId, setDataOrganizationTopIdState] = useState<string>(access.宣传刊播x配置x管理员 ? organizationTopIdOptions[0].value : organizationTopIdExamineOptions[0].value);

  //日期范围
  const [dataDates, setDataDatesState] = useState<string[]>([startDate.format(monthFormat), endOfDate.format(monthFormat)])

  return (
    <>
      <Skeleton avatar title={false} loading={false} active>
        <Card
          style={{ width: '100%', marginTop: '24px', }}
          title={false}
          tabList={[
            {
              tab: `综合传播影响力`,
              key: '0',
            },
            {
              tab: `线索报送`,
              key: '1',
            },
            {
              tab: `线索收录`,
              key: '2',
            },
            {
              tab: `签到推广`,
              key: '4',
            },
            // {
            //   tab: `全媒体传播质效`,
            //   key: '3',
            // },
            // {
            //   tab: `对外传播质效`,
            //   key: '5',
            // },
            {
              tab: `新闻传播工作质效`,
              key: '10',
            },
            {
              tab: `媒情网情社情转交办事项回复质效`,
              key: '20',
            },
            {
              tab: `文化繁荣质效`,
              key: '30',
            },
            {
              tab: `文化遗产保护质效`,
              key: '40',
            },
          ]}
          onTabChange={(key) => {
            setDataTabState(key);
          }}
          tabBarExtraContent={<>
            <span style={{ marginRight: 20 }}>
              &nbsp;
              <Cascader defaultValue={[dataOrganizationTopId]} options={access.宣传刊播x配置x管理员 ? organizationTopIdOptions : organizationTopIdExamineOptions} onChange={(value: any[], selectOptions: any) => {

                setDataOrganizationTopIdState(value[value.length - 1]);

                setDataOrganizationTopNameState(selectOptions.map((item: { label: any; }) => item.label).join(' > '))
              }}
              ><a>{dataOrganizationTopName}</a></Cascader>
            </span>
            <DatePicker.RangePicker
              allowClear={false}
              defaultValue={[startDate, endOfDate]}
              format={monthFormat}
              disabledDate={(current) => {
                return current && current > moment().endOf('day')
              }}
              onChange={(values, dates) => {
                setDataDatesState(dates)
              }}
              ranges={{
                今日: [moment(), moment()],
                本月: [moment().startOf('month'), moment().endOf('month')],
                上月: [
                  moment().startOf('month').subtract(1, 'months'),
                  moment().endOf('month').subtract(1, 'months'),
                ],
                最近7天: [moment().subtract(6, 'days'), moment()],
                最近60天: [moment().subtract(59, 'days'), moment()],
                最近90天: [moment().subtract(89, 'days'), moment()],
              }}
            />
          </>}
          bodyStyle={{
            paddingTop: 0
          }}
        ><Row style={{
          marginTop: 5
        }}>
            <Col xl={16} lg={12} md={12} sm={24} xs={24}>
              <Card bordered={false}>
                <TrendCuesColumnCard type={dataTabType} organizationTopId={dataOrganizationTopId} dates={dataDates} />
              </Card>
            </Col>
            <Col xl={8} lg={12} md={12} sm={24} xs={24}>
              <Card bordered={false}>
                <TrendCuesRankCard type={dataTabType} organizationTopId={dataOrganizationTopId} dates={dataDates} />
              </Card>
            </Col>
          </Row>
        </Card>
      </Skeleton>
    </>
  )
};

export default TrendCard;
